<template>
  <div id="login">
    <!--头部-->
    <headerBar v-if="!isLoginBox" @changeLogin="changeLogin"></headerBar>
    <div class="container" :class="[!isLoginBox ? 'container-active' : '']">
      <!--登录-->
      <div class="login-container animated fadeIn" v-if="isLoginBox">
        <div class="logo">
          <img src="@/assets/IMAGES/logo.png" alt="" />
        </div>
        <div class="login-box">
          <div class="login-title">康久数字康养云平台</div>
          <div class="login-subtitle">建设数字康养平台 创新智慧养老模式</div>
          <div class="admin-input" @keydown.enter="submit()">
            <img src="@/assets/IMAGES/admin.png" alt="" />
            <input type="text" v-model="username" placeholder="账户" />
          </div>
          <div class="password-input" @keydown.enter="submit()">
            <img src="@/assets/IMAGES/password.png" alt="" />
            <input type="password" v-model="password" placeholder="密码" />
          </div>
          <div class="code-box">
            <div class="code-input-box" @keydown.enter="submit()">
              <img src="@/assets/IMAGES/code.png" alt="" />
              <input
                type="text"
                placeholder="验证码"
                v-model="captcha"
                class="code-input"
              />
            </div>
            <div class="code-img" @click="getCode()">
              <img :src="imgSrc" alt="" />
            </div>
          </div>
          <div class="submit" @click="submit()">登录</div>
        </div>
      </div>
      <!--菜单-->
      <div
        class="menu-container animated flipInX"
        v-else-if="isMenu"
        v-for="(item, index) in menu"
        :key="index"
      >
        <div
          class="menu-list animated"
          v-for="(ite, inde) in item.list"
          :key="inde"
          @mouseover="isMouseOver(ite.title)"
          :class="isMouse == ite.title ? 'bounce' : ''"
          @click="selectMenu(ite)"
        >
          <div class="menu-logo">
            <img :src="ite.src" alt="" />
          </div>
          <div class="title">
            <h3>{{ ite.title }}</h3>
            <p>{{ ite.subtitle }}</p>
          </div>
        </div>
      </div>
      <!--菜单子项-->
      <div class="menu-dialog animated bounceInDown" v-if="isSubmenu">
        <div class="menu-left">
          <img :src="menuInfo.src" alt="" />
          <div class="title">{{ menuInfo.title }}</div>
          <div class="subtitle">{{ menuInfo.subtitle }}</div>
        </div>
        <ul class="menu-right-content">
          <li
            v-for="(item, index) in menuInfo.submenu"
            :key="index"
            :class="[item.noStart ? 'no-start' : '']"
            @click.stop="jumpPage(item.url)"
          >
            <div class="menu-content-list">
              <div class="logo">
                <img :src="item.src" alt="" />
              </div>
              <div class="project-title">
                <h5>
                  {{ item.title
                  }}<i class="tip" v-if="item.tip">{{ item.tip }}</i>
                </h5>
                <h6>{{ item.subtitle }}</h6>
              </div>
              <div class="project-right">
                <i class="no-start-text" v-if="item.noStart">(暂不开放)</i>
                <div class="icon">
                  <img src="@/assets/IMAGES/icon_right.png" alt="" />
                </div>
              </div>
            </div>
            <!--下拉菜单-->
            <div
              class="home-based-care animated fadeInDown"
              v-show="homeShow && item.url == 'homeCareManagement'"
            >
              <div class="triangle"></div>
              <div class="content-box">
                <ul class="home-base-content">
                  <li
                    v-for="(item, index) in itemMenu"
                    :key="index"
                    @click.stop="jumpPage(item.url)"
                  >
                    <div class="icon">
                      <img :src="item.src" alt="" />
                    </div>
                    <div class="title">
                      {{ item.title }}
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </li>
        </ul>
        <div class="close" @click="closeDialog()"></div>
      </div>

      <!--对话框-->
      <!-- <el-dialog title="居家养老管理" :visible.sync="homeShow" width="30%">
        <el-button
          type="text"
          class="button"
          v-for="(item, index) in itemMenu"
          :key="index"
          @click="jumpPage(item.url)"
        >
          {{ item.title }}
        </el-button>
      </el-dialog> -->
    </div>
    <!--底部-->
    <footerBar :isBase="isBase"></footerBar>
  </div>
</template>
<script>
import headerBar from "@/components/headerBar";
import footerBar from "@/components/footerBar";
export default {
  name: "login",
  data() {
    return {
      captcha: "", //验证码
      password: "",
      username: "",
      imgSrc: "",
      menuInfo: {},
      isLoginBox: true, //登录框
      isMenu: false, //菜单
      isSubmenu: false, //子菜单
      isMouse: "",
      menu: [
        {
          list: [
            {
              src: require("@/assets/IMAGES/icon_yyl.png"),
              title: "云养老",
              subtitle: "Cloud pension",
              id: 0,
              submenu: [
                {
                  src: require("@/assets/IMAGES/icon_yygl.png"),
                  title: "养老院管理",
                  subtitle: "Nursing home management",
                  //url: "http://resthome.yyanglao.com/jgadmin/login",
                  url: "https://test.yyanglao.com/jgadmin/login",
                },
                {
                  src: require("@/assets/IMAGES/icon_jj.png"),
                  title: "居家养老管理",
                  tip: "",
                  subtitle: "Home care management",
                  url: "homeCareManagement",
                },
              ],
            },
            {
              src: require("@/assets/IMAGES/icon_yyy.png"),
              title: "云医院",
              subtitle: "Cloud hospital",
              id: 1,
              submenu: [
                {
                  src: require("@/assets/IMAGES/icon_hlw.png"),
                  title: "医院管理系统",
                  subtitle: "Hospital management system",
                  url: "https://hospital.yyanglao.com/pc/#/login",
                },
                {
                  src: require("@/assets/IMAGES/icon_mz.png"),
                  title: "门诊管理系统",
                  subtitle: "Outpatient management system",
                  url: "",
                },
              ],
            },
            {
              src: require("@/assets/IMAGES/icon_yyf.png"),
              title: "云药房",
              subtitle: "Cloud pharmacy",
              id: 2,
              submenu: [
                {
                  src: require("@/assets/IMAGES/icon_yf.png"),
                  title: "云药房系统",
                  subtitle: "Cloud pharmacy system",
                  url: "yyf",
                },
              ],
            },
          ],
        },
        {
          list: [
            {
              src: require("@/assets/IMAGES/icon_gyl.png"),
              title: "供应链服务",
              subtitle: "Supply chain services",
              id: 3,
              submenu: [
                {
                  src: require("@/assets/IMAGES/icon_ygyl.png"),
                  title: "云供应链系统",
                  subtitle: "Cloud supply chain system",
                  url: "",
                },
              ],
            },
            {
              src: require("@/assets/IMAGES/icon_zf.png"),
              title: "政府数字监管",
              subtitle: "Government digital supervision",
              id: 4,
              submenu: [
                {
                  src: require("@/assets/IMAGES/tj.png"),
                  title: "民政指挥中心大屏",
                  subtitle: "Large screen of Civil Affairs command center",
                  url: "http://test.yyanglao.com/csadmin/#/routeLogin",
                  //url: "http://demo.ess.yiy-tech.cn/longwill",
                },
                {
                  src: require("@/assets/IMAGES/icon_hly.png"),
                  title: "护理员职业生涯、培训监管",
                  subtitle:
                    "Supervision of nursing staff's career and training",
                  url: "https://hzzhaopinh5.jucheng01.net/member.php/index/index.html",
                },
              ],
            },
            {
              src: require("@/assets/IMAGES/icon_yy.png"),
              title: "内部运营后台",
              subtitle: "Internal operation background",
              id: 5,
              submenu: [
                {
                  src: require("@/assets/IMAGES/icon_hlw.png"),
                  title: "互联网医院运营管理",
                  subtitle: "Internet hospital operation management",
                  url: "",
                },
                {
                  src: require("@/assets/IMAGES/icon_yl.png"),
                  title: "养老机构运营管理",
                  subtitle:
                    "Operation and management of elderly care institutions",
                  url: "",
                },
                {
                  src: require("@/assets/IMAGES/icon_szjsc.png"),
                  title: "数字康养驾驶舱",
                  subtitle: "Digital health cockpit",
                  // noStart: true,
                  // url: "cockpit",
                  url: "screenHome",
                },
                {
                  src: require("@/assets/IMAGES/icon_pay.png"),
                  title: "连连支付中心入口",
                  subtitle: "Entrance of Lianlian payment center",
                  url: "",
                },
              ],
            },
          ],
        },
      ], //菜单
      itemMenu: [
        {
          title: "老年人服务台账",
          src: require("@/assets/IMAGES/icon_tz.png"),
          url: "http://test.yyanglao.com/cshome/#/routeLogin",
        },
        {
          title: "日间守护",
          src: require("@/assets/IMAGES/icon_rjsh.png"),
          url: "https://xxtserver.xiao-xin.com",
        },
        {
          title: "夜间守护",
          src: require("@/assets/IMAGES/icon_yjsh.png"),
          url: "https://ets.yiy-tech.cn",
        },
      ],
      homeShow: false,
      isBase: false,
    };
  },
  components: {
    headerBar,
    footerBar,
  },
  methods: {
    isMouseOver(i) {
      this.isMouse = i;
    },
    /***跳转子系统***/
    jumpPage(url) {
      if (url) {
        //居家养老管理,判断是否显示子菜单
        if (url == "homeCareManagement") {
          this.homeShow = true;
          return;
        }
        //云药房
        else if (url == "yyf") {
          this.getToken();
        }
        //外链
        else if (url.includes("http")) {
          let token = JSON.parse(sessionStorage.getItem("loginInfo")).token;
          //location.href = url + `?token=${token}`;
          window.open(url + `?token=${token}`);
          //内部跳转
        } else {
          this.$router.push(url);
        }
      } else {
        this.$confirm("功能待开发，敬请期待！", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          showCancelButton: false,
        });
      }
    },
    /***云药房获取token**/
    async getToken() {
      let res = await this.$base.axiosPost(
        "https://yydsdev.yiy-tech.cn/server/user/login",
        {
          username: "demo",
          encPassword:
            "$2a$04$eJyhA799Usp63.f4XjAmoOVWrQ9iIw4hqZih1FCz4bw8JeV82/a/i",
          logintype: "backend",
        }
      );
      window.open(
        "https://yydsdev.yiy-tech.cn/manage/#/login?token=" + res.data.token,
        "_blank"
      );
    },
    /***登录***/
    async submit() {
      if (!this.password || !this.username) {
        this.$message.warning("账号密码未填写");
        return;
      }
      if (!this.captcha) {
        this.$message.warning("验证码未填写");
        return;
      }
      let res = await this.$base.postAjax(
        "/security/login",
        {
          captcha: this.captcha, //验证码
          password: this.$base.encryptAES(this.password),
          username: this.username,
          uuid: this.uuid,
        },
        "",
        true
      );
      if (res.data.code != 200) {
        this.getCode();
      } else {
        sessionStorage.setItem(
          "loginInfo",
          JSON.stringify(res.data.userEntity)
        );
        //this.$router.push("/dataScreen/main-view");

        this.isBase=true;
        this.isMenu = true;
        this.isLoginBox = false;
      }
    },
    //退出登录
    changeLogin() {
      sessionStorage.clear();
      this.isMenu = false;
      this.isLoginBox = true;
      this.homeShow = false;
      this.isSubmenu = false;
      this.isBase = false;
      this.getCode();
    },
    /***获取验证码***/
    getCode() {
      this.uuid = this.$base.guid();
      this.$base
        .getImgCode("/security/captcha.jpg", {
          uuid: this.uuid,
        })
        .then((res) => {
          let dataStr = this.transformArrayBufferToBase64(res.data);
          this.imgSrc = "data:image/png;base64," + dataStr;
        });
    },
    //文件流装换成base64
    transformArrayBufferToBase64(buffer) {
      var binary = "";
      var bytes = new Uint8Array(buffer);
      for (var len = bytes.byteLength, i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[i]);
      }
      return window.btoa(binary);
    },
    /***点击主菜单***/
    selectMenu(info) {
      this.menuInfo = info;
      this.isMenu = false;
      this.isSubmenu = true;
    },
    closeDialog() {
      this.isSubmenu = false;
      this.isMenu = true;
    },
  },
  created() {
    sessionStorage.clear();
    if (
      sessionStorage.getItem("loginInfo") &&
      sessionStorage.getItem("loginInfo") != "{}"
    ) {
      this.isMenu = true;
      this.isLoginBox = false;
    } else {
      this.getCode();
    }
  },
  mounted() {
    document.addEventListener("click", () => {
      this.homeShow = false;
    });
  },
};
</script>
<style lang="scss" scoped>
#login {
  background-color: $backgroundColor;
  background-image: url("../assets/IMAGES/bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  min-width: fixedPX(1129);
  height: 100vh;
}

.container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  height: calc(100vh - 60px);
  // min-height: fixedPX(460);
  margin: 0 auto;
  min-width: fixedPX(1129);
}

.container-active {
  height: calc(90vh - 60px);
}

.login-container {
  position: relative;
  width: fixedPX(740);
  height: fixedPX(460);
  background-image: url("../assets/IMAGES/login.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .logo {
    position: absolute;
    top: fixedPX(66);
    left: fixedPX(50);
    width: fixedPX(70);
    height: fixedPX(30);
  }

  .login-box {
    position: absolute;
    top: fixedPX(144);
    left: fixedPX(50);

    .login-title {
      width: fixedPX(216);
      height: fixedPX(31);
      line-height: fixedPX(31);
      font-size: fixedPX(24);
      font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
      font-weight: bold;
      color: #333333;
    }

    .login-subtitle {
      margin-top: fixedPX(4);
      width: fixedPX(214);
      height: fixedPX(16);
      line-height: fixedPX(16);
      font-size: fixedPX(12);
      font-family: MicrosoftJhengHeiRegular;
      color: #999999;
    }

    .admin-input,
    .password-input {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: fixedPX(20);
      background: $backgroundColor;
      padding: 0 fixedPX(10);
      box-sizing: border-box;
      width: fixedPX(214);
      height: fixedPX(32);
      border-radius: fixedPX(16);

      img {
        width: fixedPX(14);
        height: fixedPX(16);
        margin-right: fixedPX(10);
      }

      input {
        font-size: fixedPX(12);
        height: 100%;
        background-color: $backgroundColor;
        flex: 1;
      }
    }

    .password-input {
      margin-top: fixedPX(10);
    }

    .code-box {
      position: relative;
      margin-top: fixedPX(10);
      height: fixedPX(32);
      width: fixedPX(214);

      .code-input-box {
        width: fixedPX(110);
        height: 100%;
        background: $backgroundColor;
        border-radius: fixedPX(16);
        padding: 0 0 0 fixedPX(12);
        box-sizing: border-box;

        img {
          height: fixedPX(17);
          width: fixedPX(10);
          display: inline-block;
          margin: fixedPX(7.5) fixedPX(12) 0 0;
        }

        .code-input {
          vertical-align: top;
          width: diffValue(100%, 36);
          height: 100%;
          font-size: fixedPX(12);
          font-family: MicrosoftJhengHeiRegular;
          line-height: 100%;
          background-color: $backgroundColor;
        }
      }

      .code-img {
        position: absolute;
        right: 0;
        top: 0;
        width: fixedPX(100);
        height: fixedPX(32);

        img {
          width: 100%;
        }
      }
    }

    .submit {
      margin-top: fixedPX(10);
      text-align: center;
      color: #fff;
      font-size: fixedPX(12);
      font-weight: 500;
      width: fixedPX(214);
      height: fixedPX(32);
      line-height: fixedPX(32);
      background: #476ecf;
      border-radius: fixedPX(16);
      cursor: pointer;
    }
  }
}

.menu-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;

  .menu-list {
    width: 336px;
    height: 316px;
    background-image: url("../assets/IMAGES/menu.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    box-sizing: border-box;
    cursor: pointer;

    .menu-logo {
      width: 100px;
      height: 100px;
      margin: 46px auto 0;
      box-sizing: border-box;
    }

    .title {
      padding-top: 68px;
      text-align: center;

      h3 {
        height: 30px;
        font-size: 22px;
        font-weight: 500;
        color: #000000;
        line-height: 30px;
      }

      p {
        height: 28px;
        font-size: 20px;
        font-weight: 400;
        color: #999999;
        line-height: 28px;
      }
    }
  }

  .menu-list:nth-child(1),
  .menu-list:nth-child(2) {
    margin-right: 40px;
  }
}

.menu-container:last-child {
  margin-bottom: 0;
}

.menu-dialog {
  position: relative;
  width: 1129px;
  height: 634px;
  background-image: url("../assets/IMAGES/dialog.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .menu-left {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 369px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;

    img {
      height: 100px;
      // width: 100px;
    }

    .title {
      width: 100%;
      margin-top: 40px;
      height: 30px;
      font-size: 22px;
      text-align: center;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 30px;
    }

    .subtitle {
      width: 100%;
      margin-top: 8px;
      height: 28px;
      font-size: 20px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      text-align: center;
      line-height: 28px;
    }
  }

  .menu-right-content {
    position: absolute;
    left: 369px;
    top: 34px;
    height: 568px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;

    li {
      width: 643px;
      height: 142px;
      padding: 0 46px 0 63px;
      cursor: pointer;

      .menu-content-list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;
        border-bottom: 1px solid #eeeeee;
      }

      .logo {
        vertical-align: middle;
        height: 33px;
        width: 33px;
        margin-right: 30px;
      }

      .project-title {
        flex: 1;

        h5 {
          height: 28px;
          font-size: 20px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: bold;
          color: #333333;
          line-height: 28px;
        }

        h6 {
          margin-top: 8px;
          height: 22px;
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          line-height: 22px;
        }

        .tip {
          height: 21px;
          font-size: 16px;
          font-family: MicrosoftJhengHeiRegular;
          color: #999999;
          line-height: 21px;
          font-weight: normal;
        }
      }

      .project-right {
        display: flex;
        align-items: center;

        .no-start-text {
          font-size: 20px;
          font-size: 20px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #cccccc;
          line-height: 28px;
          margin-right: 20px;
        }

        .icon {
          height: 24px;
          width: 14px;
        }
      }
    }

    li:last-child .menu-content-list {
      border-bottom: none;
    }

    li:hover {
      background: rgba(71, 110, 207, 0.05);
    }

    .no-start {
      h5,
      h6 {
        color: #ccc !important;
      }

      .no-start-text {
        width: 94px;
        height: 28px;
        font-size: 20px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #cccccc;
        line-height: 28px;
      }
    }
  }

  .close {
    position: absolute;
    right: -15px;
    top: -15px;
    height: 66px;
    width: 66px;
    z-index: 3;
    cursor: pointer;
    background-image: url("../assets/IMAGES/close.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
}

.box-card {
  margin-bottom: 10px;
  cursor: pointer;
  font-weight: bold;
}

.item- {
  line-height: 40px;
  padding: 0 20px;
  color: #606266;
  font-weight: normal;
}

.item-:hover {
  background: rgba(71, 110, 207, 0.05);
}

.el-collapse {
  border: none !important;
}

.button {
  display: block;
  width: 100%;
  color: #303133;
  font-weight: bold;
  text-align: left;
  padding: 20px;
  border-radius: 4px;
  transition: all 0.3s;
  margin-bottom: 10px;
  border: 1px solid #ebeef5;
}

.button:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.home-based-care {
  position: relative;
  top: -30px;
  left: 90px;
  width: 280px;

  .triangle {
    position: absolute;
    left: 30px;
    z-index: 3;
    height: 15px;
    width: 15px;
    border-radius: 2px;
    transform: rotate(45deg);
    background-color: #fff;
    border: 1px solid rgba(71, 110, 207, 0.15);
    box-shadow: 0px 0px 8px 0px rgba(71, 110, 207, 0.15);
  }

  .content-box {
    position: absolute;
    top: 8px;
    width: 100%;
    height: 170px;
    border-radius: 8px;
    background-color: #fff;
    border: 1px solid rgba(71, 110, 207, 0.15);
    box-shadow: 0px 0px 8px 0px rgba(71, 110, 207, 0.15);
  }

  .home-base-content {
    position: absolute;
    width: 100%;
    z-index: 4;
    padding: 10px 0;
    border-radius: 8px;
    background-color: #fff;

    li {
      display: flex;
      align-items: center;
      height: 50px;
      cursor: pointer;
      width: 100%;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #323232;
      padding: 0 15px;
      box-sizing: border-box;
    }

    li:hover {
      background: rgba(71, 110, 207, 0.05);
    }

    .icon {
      height: 24px;
      width: 24px;
      margin-right: 7px;
    }

    .title {
    }
  }
}
</style>
